﻿@{
    ViewBag.Title = "绑定";
}

<!DOCTYPE html>
<html lang="en" class="">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="~/Content/wechat/js/flexible.debug.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link href="~/Content/wechat/css/phone-account-h5.css?time=@(DateTime.Now.ToShortTimeString())" rel="stylesheet" />
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <style>
        /*html,body{
            height: 100vh;
        }*/
    </style>
</head>
<body class="validate-html">
    <!-- 页面结构写在这里 -->
    <div class="validate-bg">
        <header>
            <h1>手机号或工号</h1>
        </header>
        <div class="content">
            <div class="input-ct">
                <input type="text" id="userName" class="contact-input">
            </div>
            <div class="tip">仅供集团员工内部登录使用，可通过手机号或工号进行验证。</div>
            <div class="btn-ct">
                <input type="button" value="验证" class="validate-btn">
            </div>
        </div>
        <div class="validate-msg-ct"></div>
    </div>

    <div class="pop-panel-mask"></div>
    <script src="~/Content/js/zepto.js"></script>
    <script>
        var oppid = "@ViewData["openid"]";
        var popMsg = function (msg) {
            var $dom = $('<div class="validate-msg">' + msg + '</div>');
            $('.validate-msg-ct').append($dom);
            //            $('.validate-msg').addClass('validate-msg-ease');
            $dom.addClass('validate-msg-animation');

            setTimeout(function () {
                $dom.on('animationend', function () {
                    $dom.remove();
                });
                $dom.on('WebkitAnimationEnd', function () {
                    $dom.remove();
                });
            }, 100);
        };
        var panelStr = [
            '<div class="pop-panel">',
            '<div class="img-ct">',
            '<img class="yesIcon" src="/Content/wechat/img/phone-img/yes-icon.png">',
            '</div>',
            '<div class="success">通过验证</div>',
            '<div class="btn-ct">',
            '<input type="button" id="ok" value="我知道了" class="sure-btn">',
            '</div>',
            '</div>'];
        var popPanel = function () {
            $('.pop-panel-mask').append(panelStr.join(''));
            $('.pop-panel-mask').css({ 'pointer-events': 'auto', opacity: 1 });
        };
        $('.validate-btn').on('click', function (e) {
            var val = $('.contact-input').val();
            if (!val) {
                popMsg('手机号或工号为非空');
            } else {
                debugger
                var name = $("#userName").val();
                if (name == '' || name.length <= 3 || name.length >= 50) {
                    popMsg('请输入正确手机号码或工号');
                    return false;
                }
                $.ajax({
                    type: "Post",
                    url: "/WeiXin/Binding",
                    data: { userName: name, openid: oppid },
                    dataType: "json",
                    success: function (data) {
                        debugger
                        if (data.success) {
                            //popMsg('验证通过');
                            popPanel();
                        } else {
                            popMsg(data.message);
                        }

                    },
                    error: function (data) {
                        popMsg('员工档案信息不匹配');
                    }
                });

            }
        });

        debugger;
        //$('.sure-btn').on('click', function (e) {
        //    debugger;
        //    window.location.href = "/WeiXin/OAuthSnsApiUserInfo"
        //});


        $('body').on('click', '.sure-btn', function () {
            $('.pop-panel').remove();
            window.location.href = "/WeiXin/OAuthSnsApiUserInfo"
            $('.pop-panel-mask').css({ 'pointer-events': 'none', opacity: 0 });
        });
    </script>

</body>

</html>